<template>
  <div>
    <v-header></v-header>
    <el-form :model="loginForm" ref="loginForm" class="loginContainer" status-icon :rules="rules" @keyup.enter.native="submitForm('loginForm')">
      <el-form-item>
        <el-row>
          <el-col :span="12">
            <router-link to='login' style="text-decoration: none;">
              <div class="grid-content bg-purple" style="text-align: center;font-size: 20px;color: #409EFF;border-bottom: 2px solid #409EFF;">
                登录
              </div>
            </router-link>
          </el-col>
          <el-col :span="12">
            <router-link to='register' style="text-decoration: none;color: #000000">
              <div class="grid-content bg-purple-light" style="text-align: center;font-size: 20px;">
                  注册
              </div>
            </router-link>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="usernameOrEmail">
        <el-input v-model="loginForm.usernameOrEmail" auto-complete="false" type="text" prefix-icon="el-icon-user" placeholder="请输入昵称\邮箱" class="inputContainer"></el-input>
      </el-form-item >
      <el-form-item prop="pass">
        <el-input v-model="loginForm.pass" auto-complete="false" type="password" prefix-icon="el-icon-lock" placeholder="请输入密码" class="inputContainer"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="loginForm.code" style="width: 150px" prefix-icon="el-icon-postcard" placeholder="请输入验证码" class="inputContainer"></el-input>
        <el-image title="点击更换验证图片" style="width: 100px; height: 40px;margin-left: 10px;overflow:inherit" :src="loginForm.url" @click="getCodeImg()"></el-image>
      </el-form-item>
      <el-form-item style="height: 50px;line-height: 50px">
        <div style="display: inline-block;width: 100%">
          <div style="float: left">
            <el-checkbox v-model="loginForm.check">记住我</el-checkbox>
          </div>
          <div style="float: right;margin-right: 0;">
            <router-link to="forget">
            <el-link :underline="false" >忘记密码?</el-link>
            </router-link>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')" style="width: 100%" class="inputContainer">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import header from "../layout/Header";
import footer from "../layout/Footer";

export default {
  components: {
    'v-header': header,
    'v-footer': footer
  },
  name: 'Login',
  data() {
    let checkUserNameOrEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名或者邮箱'))
      } else {
        if (value.length < 2 || value.length > 32) {
          callback(new Error('用户名或邮箱长度异常'))
        }
        callback()
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value.length < 8 || value.length > 32) {
          callback(new Error('密码长度必须在8到32位之间'))
        }
        callback()
      }
    };
    let checkCode = (rules, value, callback) => {
      if (value === '') {
        callback(new Error('验证码不能为空'))
      } else {
        callback()
      }
    };
    return {
      loginForm: {
        usernameOrEmail: '',
        pass: '',
        check: false,
        code: '',
        url: ''
      },
      rules: {
        usernameOrEmail: [
          { validator: checkUserNameOrEmail, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        code: [
          { validator: checkCode, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    document.title = '登录';
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: '/user/before/login',
            dataType: 'json',
            data: {
              usernameOrEmail: this.loginForm.usernameOrEmail,
              password: this.loginForm.pass,
              code: this.loginForm.code
            }
          }).then((res) => {
            if (res.data.msgCode === '0') {
              this.$message({
                message: res.data.msg,
                type: 'error'
              });
            } else {
              if (res.data.msgCode_other%2===1){
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                });
              }else {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                if (this.loginForm.check){
                  localStorage.setItem('token', res.data.data.token);
                }else {
                  localStorage.setItem('token', res.data.data.token);
                }
                this.$router.push('/index')
              }

            }
          })
        } else {
          console.log('error submit!!');
          return false
        }
      })
    },
    getCodeImg() {
      this.$axios({
        method: 'post',
        url: '/user/before/getCodeImg',
        responseType: 'blob'
      }).then((res) => {
        console.log(window.URL.createObjectURL(res.data));
        this.loginForm.url = window.URL.createObjectURL(res.data);
      })
    }
  },
  mounted() {
    this.getCodeImg()
  }
}
</script>

<style>
  .loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 30px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 25px #cac6c6;
  }
  .inputContainer{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
</style>
